<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>合同录入</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>

<div class="layui-container">
    <form class="layui-form" action="" id="fm">
        <div class="layui-form-item">
            <label class="layui-form-label">合同类型</label>
            <div class="layui-input-inline" style="width: 300px">
                <select name="contractType" id="contractType" lay-verify lay-filter="required"  >
                    <option value="-1">请选择合同类型</option>
                    <option value="1">销售合同</option>
                    <option value="2">采购合同</option>
                    <!-- 其他选项 -->
                </select>
            </div>
            <label class="layui-form-label">合同编号</label>
            <div class="layui-input-inline">
                <input type="text" id="contractNumber" name="contractNumber" lay-verify="required" placeholder="请输入合同编号" autocomplete="off" class="layui-input" style="width: 300px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-inline" style="width: 300px">
                <select name="orderId" lay-verify="required" id="pop">

                </select>
            </div>
            <label class="layui-form-label">客户</label>
            <div class="layui-input-inline">
                <select name="clientId" lay-verify="required">
                    <option value="-1" id="cop">请选择客户</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商</label>
            <div class="layui-input-inline">
                <input type="text" name="supplier" lay-verify="required" placeholder="请输入供应商" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">签约时间</label>
            <div class="layui-input-inline">
                <input type="text" name="contractTime" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">交货地址</label>
            <div class="layui-input-inline">
                <input type="text" name="deliveryAddress" lay-verify="required" placeholder="请输入交货地址" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">交货时间</label>
            <div class="layui-input-inline">
                <input type="text" name="deliveryTime" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">订单金额</label>
            <div class="layui-input-inline">
                <input type="text" name="orderMoney" lay-verify="required" placeholder="请输入订单总金额" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-input-inline" style="margin-left: 60px">备注</label>
            <div class="layui-input-block">
                <input type="text" name="contractSrc"  class="layui-textarea" style="width: 800px;height:50px"></input>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 400px">
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button class="layui-btn"  lay-submit lay-filter="submit" >保存合同</button>
            </div>
        </div>
    </form>
</div>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
    layui.use(['form', 'laydate'], function(){
        var form = layui.form;
        var laydate = layui.laydate;

        //日期选择器
        laydate.render({
            elem: 'input[name="deliveryTime"]',
            format: 'yyyy-MM-dd'
        });

        laydate.render({
            elem: 'input[name="contractTime"]',
            format: 'yyyy-MM-dd'
        });
        //监听提交
        form.on('submit(submit)', function(data){
            var formData = data.field;
            //提交表单代码
            console.log(formData);
            let value = $('#fm').serializeArray();
            $.each(value, function(index,item){
                data[item.name] = item.value;
            });
            let con = JSON.stringify(data);
            $.ajax( {
                "url"            :  "contract/addContract",
                "type"         :  "post",
                "data"         :  con,
                "dataType" :  "json",
                contentType:"application/json;charset=utf-8",
                "success"  :  function(result) {
                    layer.msg(result.message)
                },
                "error"       :  function() {
                    alert("添加失败")
                }
            } );
            return false;
        });
    });
</script>
</body>
<script type="text/javascript">
    getquotationNumber()
    function getquotationNumber() {
        $.ajax( {
            "url"            :  "contract/queryOrder",
            "type"         :  "get",
            "data"         :  {},
            "dataType" :  "json",
            // contentType:"application/json;charset=utf-8",
            "success"  :  function(result) {
                console.log(result)
                let opo =''
                for (let ord in result) {
                    opo +=`
                    <option value="\${result[ord].orderId}">\${result[ord].quotationNumber}</option>
                    `
                }
                $('#pop').append(opo)
                layui.form.render('select'); // 重新渲染select元素
            },
            "error"       :  function() {
                alert("查询没有东西")
            }
        } );
        $.ajax( {
            "url"            :  "contract/getclient",
            "type"         :  "get",
            "data"         :  {},
            "dataType" :  "json",
            // contentType:"application/json;charset=utf-8",
            "success"  :  function(result) {
                console.log(result)
                let opo =''
                for (let ord in result) {
                    opo +=`
                        <option value="\${result[ord].clientId}">\${result[ord].clientName}</option>
                    `
                }
                $('#cop').after(opo);
                layui.form.render('select'); // 重新渲染select元素
            },
            "error"       :  function() {
                alert("没有查询到客户")
            }
        } );
    }

</script>
<script>
    layui.use('form', function() {
        var form = layui.form;
        form.on('select(required)', function(data) {
            var contractNumberInput = document.getElementById("contractNumber");
            var contractType = data.value;
            var randomNumber = Math.floor(Math.random() * 10000);
            var contractNumber;

            if (contractType == "1") {
                contractNumber =  "HSJX" + randomNumber.toString().padStart(4, '0');
            } else if (contractType == "2") {
                contractNumber = "HSJC" + randomNumber.toString().padStart(4, '0');
            } else {
                contractNumber = "";
            }

            contractNumberInput.value = contractNumber;

            // 获取选中的值
            console.log(contractType);
        });
    });
</script>
</html>